<template>
	<view class="integral-box">
		<view class="every-box" v-if="cardInformation.length>0" :style="{'height':`${height}rpx`}">
			<blood-pressure :colorObject="colorList[index]"
				@tap="jumpPages({page:'/pagesHome/measurement-details/measurement-details',params:{data:JSON.stringify(item)}})"
				v-for="(item,index) in cardInformation" :key="item.indicName" :name="item.indicName" :data="item">
			</blood-pressure>
		</view>
		<nodata v-if="cardInformation.length==0" text="请编辑卡片指标"></nodata>
		<!-- 编辑卡片 -->
		<view class="edit-card-box">
			<view class="align-items-l" @tap="jumpEdit">
				<dev-svg-image svgName="edit" width="50"></dev-svg-image>
				<text>编辑指标卡片</text>
			</view>
			<view @tap="clickMore()" class="align-items-l" v-if="cardInformation.length>4">
				{{open?'收起':'更多'}}
				<dev-svg-image modify-color="#F5A623" height="30"></dev-svg-image>
			</view>
		</view>

	</view>
</template>

<script>
	import bloodPressure from './blood-pressure.vue'
	export default {
		name: 'health-card', //健康卡片
		components: {
			bloodPressure
		},
		data() {
			return {
				cardInformation: [], //卡片信息
				isLogin: false, //是否登录
				send: false, //是否点击中
				height: 750, //默认高度
				open: false, //是否展开全部
				loading:true,//是否加载中
					// lineBgColor: 'linear-gradient(180deg, #EDBDBC 0%, #F7D4CE 20%, #FCE8CC 100%)',
				colorList: [{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#EA983E',
					twoColor: '#F52C56',
					lineBgColor:'l(90) 0:#EDBBBC 0.2:#F3CFC9 1:#FCE2CA'
				},{
					bgColor: 'linear-gradient(180deg, #F6F6FD 0%, #DCDDFF 100%)',
					oneColor: '#7E7BE3',
					twoColor: '#EB4870',
					lineBgColor:'l(90) 0:#D7D6F0 0.2:#D5D4F2 1:#DADBFE'
				},{
					bgColor: 'linear-gradient(180deg, #FCF4F8 0%, #F5CEDA 100%)',
					oneColor: '#F52C56',
					twoColor: '#5AC5F8',
					lineBgColor:'l(90) 0:#EFC7D5 0.2:#ECC0D0 1:#F6C6D5'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#F52C56',
					twoColor: '#EA983E',
					lineBgColor:'l(90) 0:#EECDC7 0.2:#F4D1CA 1:#FCDFC9'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#EA983E',
					twoColor: '#F52C56',
					lineBgColor:'l(90) 0:#EDBBBC 0.2:#F3CFC9 1:#FCE2CA'
				},{
					bgColor: 'linear-gradient(180deg, #F6F6FD 0%, #DCDDFF 100%)',
					oneColor: '#7E7BE3',
					twoColor: '#EB4870',
					lineBgColor:'l(90) 0:#D7D6F0 0.2:#D5D4F2 1:#DADBFE'
				},{
					bgColor: 'linear-gradient(180deg, #FCF4F8 0%, #F5CEDA 100%)',
					oneColor: '#F52C56',
					twoColor: '#5AC5F8',
					lineBgColor:'l(90) 0:#EFC7D5 0.2:#ECC0D0 1:#F6C6D5'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#F52C56',
					twoColor: '#EA983E',
					lineBgColor:'l(90) 0:#EECDC7 0.2:#F4D1CA 1:#FCDFC9'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#EA983E',
					twoColor: '#F52C56',
					lineBgColor:'l(90) 0:#EDBBBC 0.2:#F3CFC9 1:#FCE2CA'
				},{
					bgColor: 'linear-gradient(180deg, #F6F6FD 0%, #DCDDFF 100%)',
					oneColor: '#7E7BE3',
					twoColor: '#EB4870',
					lineBgColor:'l(90) 0:#D7D6F0 0.2:#D5D4F2 1:#DADBFE'
				},{
					bgColor: 'linear-gradient(180deg, #FCF4F8 0%, #F5CEDA 100%)',
					oneColor: '#F52C56',
					twoColor: '#5AC5F8',
					lineBgColor:'l(90) 0:#EFC7D5 0.2:#ECC0D0 1:#F6C6D5'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#F52C56',
					twoColor: '#EA983E',
					lineBgColor:'l(90) 0:#EECDC7 0.2:#F4D1CA 1:#FCDFC9'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#EA983E',
					twoColor: '#F52C56',
					lineBgColor:'l(90) 0:#EDBBBC 0.2:#F3CFC9 1:#FCE2CA'
				},{
					bgColor: 'linear-gradient(180deg, #F6F6FD 0%, #DCDDFF 100%)',
					oneColor: '#7E7BE3',
					twoColor: '#EB4870',
					lineBgColor:'l(90) 0:#D7D6F0 0.2:#D5D4F2 1:#DADBFE'
				},{
					bgColor: 'linear-gradient(180deg, #FCF4F8 0%, #F5CEDA 100%)',
					oneColor: '#F52C56',
					twoColor: '#5AC5F8',
					lineBgColor:'l(90) 0:#EFC7D5 0.2:#ECC0D0 1:#F6C6D5'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#F52C56',
					twoColor: '#EA983E',
					lineBgColor:'l(90) 0:#EECDC7 0.2:#F4D1CA 1:#FCDFC9'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#EA983E',
					twoColor: '#F52C56',
					lineBgColor:'l(90) 0:#EDBBBC 0.2:#F3CFC9 1:#FCE2CA'
				},{
					bgColor: 'linear-gradient(180deg, #F6F6FD 0%, #DCDDFF 100%)',
					oneColor: '#7E7BE3',
					twoColor: '#EB4870',
					lineBgColor:'l(90) 0:#D7D6F0 0.2:#D5D4F2 1:#DADBFE'
				},{
					bgColor: 'linear-gradient(180deg, #FCF4F8 0%, #F5CEDA 100%)',
					oneColor: '#F52C56',
					twoColor: '#5AC5F8',
					lineBgColor:'l(90) 0:#EFC7D5 0.2:#ECC0D0 1:#F6C6D5'
				},{
					bgColor: 'linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%)',
					oneColor: '#F52C56',
					twoColor: '#EA983E',
					lineBgColor:'l(90) 0:#EECDC7 0.2:#F4D1CA 1:#FCDFC9'
				},
				
				
				]
			}
		},
		mounted() {
            this.open = false;
			if (global.token) {
				this.isLogin = true;
			} else {
				this.isLogin = false;
			}
			this.getCurve(); //卡片曲线
		},
		filters: {
			fnName: function(value) {
				return value;
			}
		},

		methods: {
			//点击更多展开全部
			clickMore() {
				if (!this.open) {
					this.height = (this.cardInformation.length / 2).toFixed(0) * 376;
					this.open = true;
				} else {
					this.height = 750;
					this.open = false;
				}
			},

			//获取卡片曲线
			getCurve() {
                 this.open = false;
				// this.isLogin = true;
				// this.cardInformation = [];
				let parameter = {}
				if (this.isLogin) {
					parameter['hisUserId'] = global.userInfo.userId
				} else {
					parameter['hisUserId'] = ''
				}
                this.indicatorList(parameter);
				
			},
            indicatorList(parameter) {
                console.info(this.isLogin,"this.isLogin-->")
                let indicatorListUrl = this.isLogin?global.apiUrls.indicatorList:global.apiUrls.defaultIndicators;
                let curveUrl = this.isLogin?global.apiUrls.getCurve:global.apiUrls.getDefaultCurve;
                console.info(indicatorListUrl,"indicatorListUrl")  
                 console.info(curveUrl,"curveUrl")  
            	this.$https.get(indicatorListUrl, {
            		hisUserId: parameter.hisUserId
            	}).then(res => {
            		console.log(res)
            		if (res.data.code == 1000) {
            			this.$https.get(curveUrl, parameter).then(res => {
            				this.cardInformation = res.data.result;
            				console.log(this.cardInformation,'卡片数据是多少')
            				if(this.cardInformation.length<=4 && this.cardInformation.length>0 && this.cardInformation){
            					this.height = (this.cardInformation.length / 2).toFixed(0) * 376;
            				}else{
            					this.height = 750;
            				}
            			})
            		}
            	})
            },
			//跳转到编辑
			jumpEdit() {
				this.$basejs.globaltoken();
				this.$urouter.navigateTo('/pagesHome/edit-card/edit-card');
			},

			//登录
			login() {
				uni.navigateTo({
					url: '/pages/signIn/signIn'
				});
			},
			//跳转界面
			jumpPages(val) {
				if (this.isLogin) {
					if (this.send == false) {
						this.send = true;
						this.$urouter.navigateTo({
							url: val.page,
							params: val.params
						});
						setTimeout(() => {
							this.send = false;
						}, 1000);
					}
				} else {
					this.login()
				}

			},
		}
	}
</script>

<style lang="scss">
	.integral-box {
		padding: 0rpx 24rpx;
		background-color: #fff;
		box-shadow: 0px 15rpx 26rpx 0rpx rgba(219, 215, 215, 0.25);
	}

	.every-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow: hidden;
		// background-color: aquamarine;
		// margin-bottom: 40rpx;
	}

	.edit-card-box {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 400;
		color: #F5A623;
		// margin-top: 40rpx;
		// background-color: aqua;
	}
</style>
